@import '../common.scss';

.prev-next__container {
  a:hover {
    color: $black;
    background-color: $white;

    p,
    b {
      color: $black;
    }
  }

  .separator {
    display: none;

    @include to($tablet) {
      display: block;
      background-color: var(--color-text);
      width: 2px !important;
    }
  }

  .prev {
    p,
    b {
      text-align: right;
    }

    @include to($tablet) {
      p {
        &::before {
          content: '<';
          margin-right: 1rem;
        }
      }
    }
  }

  .next {
    @include to($tablet) {
      p {
        &::after {
          content: '>';
          margin-left: 1rem;
        }
      }
    }
  }
}
